<template>
    <div>
        <nav-com title="开卡校验" :showView='showView' @back="backHandler()"></nav-com>
        <div class="margin_box">
            <van-form @submit="onSubmit">
                <van-row class="padd_box">
                    <van-col span="24">
                        <div class="login_box" style=" ">
                            <label>开卡号：</label>
                            <input type="text" v-model='loginfrom.cardzCellphone' @blur="cellphoneHandler(loginfrom.cardzCellphone)"  placeholder="请输入已开通229手机号" />
                        </div>
                    </van-col>
                </van-row>
                <van-row type="flex" justify="space-between" class="padd_box">
                    <van-col span='12'>
                        <div class="login_box">
                            <input type="text" style="width:26.66vw; margin-left:5vw;" @blur="verificodeHandler(loginfrom.verificationCode)" v-model='loginfrom.verificationCode'  placeholder="请输入验证码" />
                        </div>
                    </van-col>
                    <van-col span='10' style="text-align:right;">
                        <div class="login_box" @click="codeHandler" v-if="codeFalg" style="text-align:center; color:#FF491F;">{{codeText}}</div>
                        <div class="login_box"  v-else style="text-align:center; color:#FF491F;">{{codeText}}</div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col style="text-align:center; color:red; font-size:4vw; margin-top:2.6vw;" span="24">
                        {{message}}
                    </van-col>
                </van-row>
                <van-row class="padd_box" style="margin-top:10.66vw;">
                    <van-col span="24">
                        <van-button style="font-size:4.8vw; height:13.33vw;" color="#FF491F" type="info" native-type='submit' round  block>确认</van-button>
                    </van-col>
                </van-row>
            </van-form>
        </div>
    </div>
</template>
<script>
import {putFttusersZjcard,postVerificationcodes }  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'card',
    components:{
        navCom
    },
    data() {
        return {
            showView:true,
            uid: weixin.getUserId(),
            message:'请认真输入，仅可被绑定一次',
            loginfrom:{
                cardzCellphone:'',
                verificationCode:'',
            },
            codeText:'获取验证码',
            codeFalg:true,
        }
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        //判断手机号
        cellphoneHandler(val){
            let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if(val =='' || val.trim().length==0){
                this.message = "开卡号不能为空"
                return false
            }else if(!reg.test(val)){
                this.message = "开卡号不正确"
                return false
            }else{
                this.message = "请认真输入，仅可被绑定一次"
                return true
            }
        },
        //判断验证码
        verificodeHandler(val){
            let reg = /^\d{4,6}$/
            if(val =='' || val.trim().length==0){
                this.message = '验证码不能为空'
                return false
            }else if(!reg.test(val)){
                this.message = '验证码不正确'
                return false
            }else{
                this.message = "请认真输入，仅可被绑定一次"
                return true
            }
        },
        
        //保存
        onSubmit(){
            if(!this.cellphoneHandler(this.loginfrom.cardzCellphone)){
                return false
            }
            if(!this.verificodeHandler(this.loginfrom.verificationCode)){
                return false
            }
            let _this = this
            let data = {
                userId:this.uid,
                cardzCellphone:this.loginfrom.cardzCellphone,
                verificationCode:this.loginfrom.verificationCode
            }

            putFttusersZjcard(data).then(res=>{
                if(res.data.code == 200){
                     _this.$dialog.alert({
                        message:'开卡成功'
                    }).then(res=>{
                        _this.$router.push('/my')
                    })
                }else {
                    _this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //获取验证码
        codeHandler(){
            let that = this
            let telLen = this.loginfrom.cardzCellphone.length
            if(telLen==11){
                let time = null
                clearInterval(time)
                that.codeFalg = false
                let t = 60
                time = setInterval(function(){
                    t--
                    that.codeText = t
                    if(t<=0){
                        that.codeText = "获取验证码"
                        that.codeFalg = true
                        clearInterval(time)
                    }
                },1000)

                postVerificationcodes({cellphone:this.loginfrom.cardzCellphone}).then(res=>{
                    if(res.data.code == 200){

                    }else{
                        this.$dialog.alert({
                            message:res.data.msg
                        })
                    }
                })

                return true
            }else{
                this.message = '请输入正确手机号'
                return false
            }
            
        },
    }
}
</script>
<style scoped>
.margin_box {margin-left:10vw; margin-right:10vw; margin-top:11.2vw;}
.padd_box {min-height:10.66vw;  margin-top:3.4vw;  border-radius: 1.333vw;}
.ashBg {background: #fff; border-radius: 25px; border:1px solid #e3e3e3; width:100%;}
.login_box {border:1px solid #e3e3e3; font-size:4.2vw; border-radius: 6.66vw; height:13.3vw; line-height:13.3vw;}
.login_box label {padding-left:5.3vw; }
.login_box input { height:11vw; line-height: 11vw; width:50vw; border:none;}
</style>